<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme"
                     style="min-width: 1100px;"
  >
    <module-header name="app" value="/display/trend" is-telescreen />

    <main-content>
      趋势总览
      <div class="card" style="display: flex;">
        <n-card v-for="item in data" :key="item.title">
          <p style="font-size: larger;">{{ item.title }}</p>
          <p style="font-size: smaller;">{{ item.time }}</p><br>
          <p>{{ item.heji }}</p>
          <p style="font-size: xx-large; font-weight:bolder;">{{ item.count }}<a style="font-size: small; font-weight: 400;">人</a></p>
        </n-card>
      </div>
      <div style="background-color: #f7f7f7;width: 90%;">
        <p style="font-size: larger; font-weight: 400; margin-left: 20px;">30日 | 活跃用户变化趋势</p>
        <p style="font-size: smaller; margin-left: 20px;">2023-02-01~2023-2-30 | 过去30天-昨日 更新于 2023-2-30 03:04:46</p>
        <div id="main" style="height: 300px;  " />
      </div>
      <div style=" margin-top: 20px; display: flex;">
        <div style="background-color: #f7f7f7;width: 500.920px;height: 300px;">
          <p style="font-size: larger; font-weight: 400; margin-left: 20px;">30日 | 新老活跃用户趋势</p>
          <p style="font-size: smaller; margin-left: 20px;">2023-02-01~2023-2-30 | 过去30天-昨日 更新于 2023-2-30 03:04:46</p>
          <div id="main2" style="height: 300px;  " />
        </div>
        <div style="background-color: #f7f7f7; margin-left: 20px;height: 300px; width: 500.920px;">
          <p style="font-size: larger; font-weight: 400; margin-left: 20px;">30日 | 新用户占比趋势</p>
          <p style="font-size: smaller; margin-left: 20px;">2023-02-01~2023-2-30 | 过去30天-昨日 更新于 2023-2-30 03:04:46</p>
          <div id="main3" style="height: 300px;  " />
        </div>
      </div>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref, reactive,onMounted } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider,NCard } from 'naive-ui'
import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import * as echarts from 'echarts'
type EChartsOption = echarts.EChartsOption;

var myChart
var option: EChartsOption

const data = reactive([
  {
    title: '7日 | 累计活跃用户数',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    heji:'合计',
    count:11120,
    unit:'人'
  },
  {
    title: '30日 | 累计活跃用户数',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    heji:'合计',
    count:215500,
    unit:'人'
  },
  {
    title: '7日 | 累计新增用户数',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    heji:'合计',
    count:3123,
    unit:'人'
  },
  {
    title: '30日 | 累计新增用户数',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    heji:'合计',
    count:1682,
    unit:'人'
  }
])

onMounted(() => {
  if(!import.meta.env.SSR) {
    myChart = echarts.init(document.getElementById('main')!)
    option = {
      xAxis: {
        type: 'category',
        data: ['2-01', '2-07', '2-08', '2-09', '2-10', '2-11', '2-12','2-13','2-14','2-15','2-16']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260, 224, 218, 135,521],
          type: 'line'
        }
      ]
    }

    option && myChart.setOption(option)
  }
})

onMounted(() => {
  if(!import.meta.env.SSR) {
    myChart = echarts.init(document.getElementById('main2')!)
    option = {
      xAxis: {
        type: 'category',
        data: ['2-01', '2-07', '2-08', '2-09', '2-10', '2-11', '2-12','2-13','2-14','2-15','2-16']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [350, 230, 224, 218, 135, 147, 260, 224, 218, 135,521],
          type: 'line'
        },
        {
          data: [450, 130, 422, 318, 235, 247, 160, 324, 418, 235,421],
          type: 'line'
        }
      ]
    }

    option && myChart.setOption(option)
  }
})

onMounted(() => {
  if(!import.meta.env.SSR) {
    myChart = echarts.init(document.getElementById('main3')!)
    option = {
      xAxis: {
        type: 'category',
        data: ['2-01', '2-07', '2-08', '2-09', '2-10', '2-11', '2-12','2-13','2-14','2-15','2-16']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [350, 230, 224, 218, 135, 147, 260, 224, 218, 135,521],
          type: 'line'
        }
      ]
    }

    option && myChart.setOption(option)
  }
})

</script>
<style scoped>
.n-card {
  max-width: 400px;
  margin-left: 10px;
  margin-bottom: 10px;
}

</style>
<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
